/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<view class="order-deta">
			<view class="order-info-time">
				<view>
					<view>{{orderInfo.order_zt}}</view>
					<view v-if="orderInfo.filter == 1">{{$t('剩余')}}{{orderInfo.sytime}}{{$t('关闭')}}</view>
					<view v-if="orderInfo.filter == 3">{{$t('剩余')}}{{orderInfo.sysh_time}}{{$t('自动收货')}}</view>
				</view>
				<image :src="imgSTATICURL+'images/img/addr-bao.png'" />
			</view>

			<view class="phone" v-if="orderInfo.filter == 3"
				@click="getnav('/pagesB/my/logistics?psnum='+orderInfo.wulius.psnum+'&kdniao_code='+orderInfo.wulius.kdniao_code+'&logistics_name='+orderInfo.wulius.log_name+'&telephone='+orderInfo.telephone)">
				<view style="width:20%;display:flex;justify-content:center">
					<i class="iconfont icon_e65e icon-bgc"></i>
				</view>
				<view class="tap_address">
					<view class="addrin">
						{{$t('订单已发货')}}{{orderInfo.wulius.log_name}}，{{$t('快递单号')}}{{orderInfo.wulius.psnum}}，{{$t('联系电话')}}{{orderInfo.wulius.telephone}}
					</view>
					<text style="color:#ccc">{{orderInfo.fh_time}}</text>
				</view>
				<i class="iconfont icon_e60c" style="width:7%;font-size:40upx;color:#ccc"></i>
			</view>
			
			
			<!-- 用户选择的邮寄信息 -->
			<view class="phone" v-if="orderInfo.province">
				<view style="width:20%;display:flex;justify-content:center">
					<i class="iconfont icon_e712 icon-bgc"></i>
				</view>
				<view class="tap_address">
					<view>
						{{orderInfo.contacts}}
						<text style="padding-left:30upx">{{orderInfo.telephone}}</text>
					</view>
					<text>{{orderInfo.province + orderInfo.city + orderInfo.area + orderInfo.address}}</text>
				</view>
			</view>
			
			<!-- 用户选择的自提信息 -->
			<view class="self_info" v-else>
				<view class="self_title">自提信息</view>
				<view class="self_userinfo">
					<view class="self_username">
						<i class="iconfont icon_e655"></i>
						<text>{{orderInfo.contacts}}</text>
					</view>
					<view class="self_username">
						<i class="iconfont icon_e682"></i>
						<text>{{orderInfo.telephone}}</text>
					</view>
				</view>
				
				<view class="self_order_list" @click="self_order()">
					<view class="self_juan">
						<text class="order_list_left_title">{{$t('查看自提点')}}</text>
					</view>
					<i class="iconfont icon_e60c order_color"></i>
				</view>
			</view>
			
			

			<view class="fresh_list">
				<view class="order_bottom">
					<view class="bottom_top">
						<view>
							<i class="iconfont cart_e61d"></i>
							{{orderInfo.shop_name}}
						</view>
						<i class="iconfont order_all_right"></i>
					</view>
					<view class="bottom_img" v-for="(item2,index) in orderInfo.goodsinfo" :key="index">
						<image :src="item2.thumb_url"
							@click="getnav('/pagesC/goods/goodsDetails?id='+item2.goods_id)" />

						<view style="padding:0 40upx 0 20upx;flex:1">
							<view class="introduce" @click="getnav('/pagesC/goods/goodsDetails?id='+item2.goods_id)">
								{{item2.goods_name}}</view>
							<view class="arrt-str">{{item2.goods_attr_str}}</view>
						</view>
						<view style="font-size:24upx;text-align:right">
							¥{{item2.real_price}}
							
							<view style="text-align:right;color:#999">x{{item2.goods_num}}</view>

							<view class="shou_sure" v-if="orderInfo.filter == 2  || orderInfo.filter == 3 || orderInfo.filter == 4">
								<view v-if="orderInfo.pinzhuangtai === 1">
									<span @click.stop="exchange(orderInfo.ordernumber)">{{$t('退款')}}</span>
								</view>
								<view v-if="orderInfo.pinzhuangtai !== 1">
									<view v-if="item2.th_status == 0 || item2.th_status == 8">
										<view v-if="orderInfo.fh_status == 1 ">
											<span
												@click.stop="getnav(`/pagesC/order/refundType?order_num=${orderInfo.ordernumber}&orgoods_id=${item2.id}`)">{{$t('退换')}}</span>
										</view>
									</view>

									<view v-else-if="item2.th_status != 0">
										<span
											@click.stop="getnav(`/pagesC/order/refundCopy?th_order_id=${item2.th_order_id}`)">
											<text v-if="item2.th_status == 1 || item2.th_status== 2">{{$t('退款中')}}</text>
											<text v-else-if="item2.th_status == 3">{{$t('商家拒绝申请')}}</text>
											<text v-else-if="item2.th_status == 4">{{$t('退款完成')}}</text>
											<text v-else-if="item2.th_status == 5 || item2.th_status == 6">{{$t('换货中')}}</text>
											<text v-else-if="item2.th_status == 7">{{$t('商家拒绝申请')}}</text>
										</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="or_number">
					<!-- <view class="number_text">
                        实付金额:<text>¥{{orderInfo.goods_price}}</text> <i class="iconfont order_all_right"></i>
          </view>-->

					<view class="number_sure" v-if="orderInfo.filter == 1">

						<u-button class="u-m-l-20" shape="circle" plain size="mini" @click="cancellation">{{$t('取消订单')}}
						</u-button>
						<u-button class="u-m-l-20" shape="circle" type="warning" plain size="mini"
							@click="getpay(orderInfo.ordernumber)">{{$t('付款')}}</u-button>
					</view>
					<!-- <view class="number_sure" v-if="orderInfo.filter == 3">

                        <span class="payment_order"  @click="getqrshouhuo">确认收货</span>
          </view>-->
				</view>
			</view>

			<view class="order_list order-list-info u-p-t-10">
				<view>
					<text>{{$t('支付方式')}}</text>
					<text class="color">{{orderInfo.paytype}}</text>
				</view>
				<view>
					<text>{{$t('商品价格')}}</text>
					<text class="color">¥ {{orderInfo.goods_price}}</text>
					
				</view>
				<view>
					<text>{{$t('物流公司')}}</text>
					<text class="color">{{orderInfo.logistics}}</text>
				</view>
				<view>
					<text>{{$t('物流单号')}}</text>
					<text class="color">{{orderInfo.logistics_no}}</text>
				</view>
				<view>
					<text>{{$t('运费')}}</text>
					<text class="color">¥ {{orderInfo.freight}}</text>
					
				</view>

				<view>
					<text>{{$t('优惠券')}}</text>
					<text class="color">-¥ {{orderInfo.youhui_price}}</text>
					
				</view>
				<view>
					<text>{{$t('优惠信息')}}</text>
					<text class="color">{{orderInfo.coupon_str}}</text>
				</view>
				<view class="order-name">
					<text>{{$t('应付金额')}}</text>
					<text class="color">¥ {{orderInfo.total_price}}</text>
					
				</view>
			</view>
			
			<view class="order_list order-list-info u-m-t-20 u-p-t-10 u-p-b-10" v-if="orderInfo.check_order_sn">
				<view>
					<text>{{$t('核销码')}}</text>
					<text class="color">{{orderInfo.check_order_sn}}</text>
				</view>
				<view @click="showErCodeOpen">
					<text>{{$t('核销二维码')}}</text>
					<text class="color">显示二维码</text>
				</view>
			</view>

			<view class="order_list order-list-info u-m-t-20 u-m-b-60 u-p-t-10 u-p-b-10">
				<view>
					<text>{{$t('订单号')}}:</text>
					<text class="color">{{orderInfo.ordernumber}}</text>
				</view>
				<view>
					<text>{{$t('交易编号')}}:</text>
					<text class="color">{{orderInfo.order_number}}</text>
				</view>
				<view>
					<text>{{$t('创建时间')}}</text>
					<text class="color">{{orderInfo.addtime}}</text>
				</view>
				<view v-if="orderInfo.filter == 2 || orderInfo.filter == 3 || orderInfo.filter == 4">
					<text>{{$t('创建时间')}}</text>
					<text class="color">{{orderInfo.pay_time}}</text>
				</view>
				<view v-if="orderInfo.filter == 3 || orderInfo.filter == 4">
					<text>{{$t('发货时间')}}</text>
					<text class="color">{{orderInfo.fh_time}}</text>
				</view>
				<view v-if="orderInfo.filter == 4">
					<text>{{$t('收货时间')}}</text>
					<text class="color">{{orderInfo.coll_time}}</text>
				</view>
			</view>
			
			<pay-pop ref="payPop" :totalPrice="orderInfo.total_price" :integral="orderInfo.integral">
				<div class="pay-btn" @click="$u.throttle(crosspay,1500)">{{$t('确认支付')}}</div>
			</pay-pop>			
			
			<u-popup ref="popupCopun" mode="bottom" border-radius="12">
				<view class="popup-coupon">
					<view class="popup-title">{{$t('店铺自提点')}}</view>
					<view class="coupon-list">
						<view class="guarantee" v-for="(value,index) in shopStore" :key="index">
							<image />
							<view class="guar-cont">
								<view>{{value.province}}{{value.city}}{{value.area}}</view>
								<view style="color:#999;margin-top:10rpx;">{{value.address_detail}}</view>
								<view style="color:#999;margin-top:10rpx;">营业时间:{{value.work_start_time}}-{{value.work_end_time}}</view>
								<view style="color:#999;margin-top:10rpx;">联系人:{{value.contact}} 电话:{{value.phone}}</view>
							</view>
						</view>
					</view>
				
					<view class="popup-com">
						<button @click="self_order_close">{{$t('关闭')}}</button>
					</view>
				</view>
			</u-popup>
			
			<u-popup ref="weiCode" mode="bottom" border-radius="12">
				<view class="popup-coupon">
					<view class="weierCode">
						<uqrcode ref="uQRCode" :text="orderInfo.check_order_sn" size="200"/>
					</view>
				
					<view class="popup-com">
						<button @click="showErCodeClose">{{$t('关闭')}}</button>
					</view>
				</view>
			</u-popup>
			
		</view>
	</view>
</template>

<script>
	let order_num = "",
		payOrderNumer; // 订单编号
	let page = 1; // 页码
	let providerList = []; // 支付通道
	let orderInfoData = {};

	let backindex = "";
	import payPop from "@/pagesC/components/payPop";

	export default {
		components: {
			payPop
		},
		data() {
			return {
				imgSTATICURL: this.STATICURL,
				wechatMiniProgram: 0,
				h5: 0,
				orderInfo: {}, // 订单详情
				valShow: false,
				valueStatus: 0, // 更新页面状态 防止页面卡死
				shopStore:[
					{id:1,name:'aa'}
				],
			}
		},
		onShow() {
			this.getMyorderinfo();
		},
		onLoad(option) {
			order_num = option.order_num;
			backindex = option.backindex;
			//#ifdef MP-WEIXIN
			this.wechatMiniProgram = 1;
			//#endif
			//#ifdef H5
			this.h5 = 1;
			//#endif

			uni.setNavigationBarTitle({
				title: this.$t('订单详情')
			});
		},
		onBackPress() {
			console.log(backindex);
			if (backindex == 2) {
				uni.switchTab({
					url: "/pages/tabBar/cart"
				});
				return true;
			}
		},

		watch: {
			valShow() {
				this.statusMath(this);
			}
		},
		methods: {
			exchange(ordernum) {
				console.log(ordernum);
				this.$Dialog
					.confirm({
						message: this.$t('确认退款吗')+"？"
					})
					.then(() => {
						this.$loading();
						this.$http
							.exchange({
								order_num: ordernum
							})
							.then(res => {
								if (res.status === 200) {
									this.$toast(res.mess);
								}
							});
					});
			},
			getbacktel() {
				console.log(backindex);
				if (backindex == 2) {
					uni.switchTab({
						url: "/pages/tabBar/cart"
					});
				} else {
					this.getback();
				}
			},

			getMyorderinfo() {
				this.$loading();
				this.$http.getMyorderinfo({
					order_num
				}).then(res => {
					if (res.status == 200) {
						this.orderInfo = res.data;
						console.log(this.orderInfo);
					}
				});
			},
			/**
			 * 取消订单
			 */
			cancellation() {
				this.$showModal({
					content:  this.$t('确认删除订单')+'?'
				}).then(res => {
					if (res.confirm) {
						this.$loading();
						this.$http.getMyOrderquxiao({
							order_num
						}).then(res => {
							if (res.status == 200) {
								this.$toast(res.mess);
								this.getback();
							}
						});
					}
				});
			},
			/**
			 * 获取支付订单数据
			 */
			getOrderInfo(typeIndex = 2, numarr) {
			
				let dataType = {
					zf_type: typeIndex,
					order_nums: numarr,
				};
				return new Promise(reslove => {
					this.$http.getzhifuorder(dataType).then(res => {
						if (res.status == 200) {
							reslove(res);
						} else {
							this.$toast(res.mess);
						}
					});
				});
			},
			/**
			 * 支付
			 */
			async getpay(ordernumber) {

				payOrderNumer = ordernumber
				this.$refs.payPop.payModel = true;
			},
			// 生成拉起支付的密钥
			payFall(paydata,zf_type) {
				let data = {
					order_number: paydata.data.order_number,
					zf_type: zf_type,
					wechat_miniprogram: this.wechatMiniProgram,
					h5: this.h5
				}
				if (this.wechatMiniProgram === 1) {
					data.xcx_openid = uni.getStorageSync('xcxOpenid')
				}
				return new Promise(resolve => {
					this.$http.getzhifu(data)
						.then(res2 => {
							console.log(res2)
							if (res2.status == 200) {
								resolve(res2);
							}
						});
				});
			},
			
			async crosspay() {
				let ref = this.$refs.payPop
				orderInfoData = await this.getOrderInfo(ref.payType, payOrderNumer);
				if(parseFloat(ref.totalPrice) == 0 && ref.integral>0){
					ref.payType = 4
				}
				
				if (ref.payType == 5) { // 银行卡支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.bankModel = true
					return
				}else if (ref.payType == 3 || ref.payType == 4) { // 余额支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.hasPayPwd()
				} else { // 支付宝、微信支付
					const temp = await this.payFall(orderInfoData,ref.payType);
					ref.payinfos = await temp.data.infos
					console.log(ref.payinfos)
					ref.crosspay()
				}
					
				this.$hideLoading()
			},
			/**
			 *
			 */
			hidePopup() {
				this.$refs.popupRef.show();
			},

			hideAl(bal) {
				this.valShow = false;
			},			
			
			self_order() {
				this.$http.getShopStore({
					shop_id:this.orderInfo.shop_id
				}).then(res => {
					if (res.status == 200) {
						this.shopStore = res.data;
					}
				});
				this.$refs.popupCopun.open();
			},
			
			self_order_close(){
				this.$refs.popupCopun.close(); // 关闭
			},
			
			//显示二维码信息
			showErCodeOpen(){
				this.$refs.weiCode.open();
			},			
			
			//关闭二维码信息
			showErCodeClose(){
				this.$refs.weiCode.close(); // 关闭
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';
	.shou_sure {
		span {
			display: block;
			// width: 100upx;
			height: 40upx;
			padding: 0 20upx;
			line-height: 40upx;
			border-radius: 20upx;
			border: 1upx solid #999;
			color: #999;
			text-align: center;
			font-size: 24upx;
		}
	}

	.order-list-info {
		>view {
			margin: 10upx 0;

			text:nth-child(2) {
				display: block;
				flex: 1;
				text-align: left;
			}

			text:nth-child(1) {
				display: block;
				width: 30%;
				text-align: left;
			}
		}
	}
	.self_info{
		background-color:#FFFFFF;
		.self_title{
			font-size:24upx;
			color:#999999;
			padding:4upx 30upx;
			height:60upx;
			line-height:60upx;
		}
		.self_userinfo{
			padding:4upx 30upx;
			.self_username{
				height:80upx;
				line-height:80upx;
				text{
					padding-left:20upx;
				}
			}
		}
	}
	
	.self_order_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20upx 30upx;
		.self_juan {
			display: flex;
			text {
				font-size: 28rpx;
				color: #303133;
				&:nth-child(1) {
					font-weight: 500;
				}
				;
				&:nth-child(2),
				&:nth-child(3) {
					color: #606266;
				}
			}
			.color {
				color: #f44336;
			}
		}
		.order_color {
			font-size: 26rpx;
			color: #333;
		}
	}
	.weierCode{
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top:150upx;
	}
</style>
